<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- jsp文件头和头部 -->
		<jsp:include page="../js_top.jsp"/>
		<style>
		.footer a{
			width:185px;height:38px;line-height:38px;
			-webkit-border-radius:5px!important;border-radius:5px;
			display: block;
			font-size:14px;font-family:"微软雅黑";
			text-shadow: 0 0px 0 rgba(0,0,0,0)!important;
			background:#b7bacb url(/static/img/images/table_report_icon.png) no-repeat 70px center!important;
			float:right;text-align:center;
			color:#fff;
			cursor: pointer;text-indent: 20px;
			margin:10px 60px 0 0;
			border: 0;
		}
		.footer a:last-child{margin:10px 0 0 75px;float:left;background:#b7bacb url(/static/img/images/table_report_icon1.png) no-repeat 70px center!important;}
		.footer a:hover{background-color:#0fb1d6!important;text-decoration:none;}
		</style>
	</head>
<body>	
<div class="container-fluid" id="main-container">
<div class="row-fluid">
		<div class="span12">
			<div class="row-fluid" style="width:500px;margin:10px auto;padding:auto;">
				<div class="span5" style="width:200px; float: left">
					<div class="widget-box">
						<div class="widget-header widget-header-flat widget-header-small">
							<h5><i class=""></i>未选择角色</h5>
						</div>
						<div class="widget-body" style="height:360px">
							 <select multiple="multiple" id="select1" style="width:100%; height:360px;border:1px #A0A0A4 outset;  ">
							      ${select1}
							 </select>
						</div>
					</div>
				</div>
				<div class="span2" style="width:80px; float: left">
					<div> <span id="add">
				         <br /><br /><br /><br /><br />
				          <button class="btn btn-mini btn-light" style="width:80px; height:30px; margin-top:10px; cursor:pointer;" >加入<i class="icon-step-forward">
						  </i></button>
				          </span><br />
				          <span id="add_all">
				          <button class="btn btn-mini btn-light" style="width:80px; height:30px; margin-top:10px; cursor:pointer;" >全部加入<i class="icon-fast-forward"></i></button>
				          </span> <br />
				          <span id="remove">
				          <button class="btn btn-mini btn-light" style="width:80px; height:30px; margin-top:10px; cursor:pointer;" >移除<i class="icon-step-backward"></i></button>
				          </span><br />
				          <span id="remove_all">
				           <button class="btn btn-mini btn-light" style="width:80px; height:30px; margin-top:10px; cursor:pointer;" >全部移除<i class="icon-fast-backward"></i></button>
				          </span> 
				    </div>
				</div>
				<div class="span5" style="width:200px; float: left">
					<div class="widget-box">
						<div class="widget-header widget-header-flat widget-header-small">
							<h5><i class=""></i>已选择角色</h5>
						</div>
						<div class="widget-body" style="height:360px">
							<select multiple="multiple" id="select2" style="width: 100%;height:360px;border:1px #A0A0A4 outset; ">
				          	 ${select2}
				          </select>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
	<footer>
		<div class="footer" style="width: 100%;" class="center">
			<a class="btn btn-mini btn-info" onclick="top.Dialog.close();">取消</a>
			<a class="btn btn-mini btn-info" onclick="save();">确定</a>
		</div>
	</footer>
</div>

<script type="text/javascript">
//下拉框交换JQuery
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项，删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右边
    $('#add_all').click(function() {
        //获取全部的选项,删除并追加给对方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左边
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //双击选项
    $('#select1').dblclick(function(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo('#select2'); //追加给对方
    });
    //双击选项
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
//取取选中的值
function getvalues(){
 var sel = document.getElementById("select2");

	for(var i=0;i<sel.options.length;i++)
	{
		alert(sel.options[i].value);  //获取option的value
	}
}
//保存
function save(){
	var sel = document.getElementById("select2");
	var roleIds = "";
	for(var i=0;i<sel.options.length;i++){
		roleIds = roleIds+sel.options[i].value+","//获取option的value
	}
	var id = ${id};
	var url = '<%=basePath%>sys/sysUser/saveUserRole.do';
	var postData;
	postData = {"userId":id,"roleIds":roleIds};
	layer.load();
	$.post(url,postData,function(data){
		if(data && data=="success"){
		setTimeout(function(){
		    layer.closeAll('loading');
		}, 500);
			top.Dialog.close();	
		}
	});
}
</script>
</body>
</html>